<template>
  <div class="userCenter">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content">
      <div class="head flex">
        <div class="left flex">
          <div class="photo">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </div>
          <div class="rdesc">
            <div class="topinfo flex">
              <div class="name">{{ name }}</div>
              <div class="sex">
                <span v-if="sex == 0">男</span><span v-if="sex == 1">女</span>
              </div>
              <div class="city">{{ city }}</div>
            </div>
            <div class="desc">{{ desc }}</div>
            <div class="binfo flex">
              <div class="notebox">
                <div class="note">笔记</div>
                <div class="notenum">{{ noteNum }}</div>
              </div>
              <div class="notebox">
                <div class="note">粉丝</div>
                <div class="notenum">{{ fans }}</div>
              </div>
              <div class="notebox">
                <div class="note">获赞和收藏</div>
                <div class="notenum">{{ ds }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="right">编辑资料</div> -->
      </div>
      <div class="wrap flex" v-if="!uid">
        <div class="wleft">
          <el-tabs :tab-position="tabPosition" @tab-click="onTabClick">
            <el-tab-pane
              v-for="item in navList"
              :key="item.id"
              :label="item.name"
            >
              <div class="wrap"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="wright">
          <div class="container-water-fall" v-show="id == 0">
            <waterfall
              :col="col"
              :width="itemWidth"
              :gutterWidth="gutterWidth"
              :data="newsList"
              @loadmore="loadmore"
            >
              <template>
                <div class="cell-item" v-for="item in newsList" :key="item.id">
                  <img
                    v-if="item.cover_one"
                    :src="item.cover_one"
                    @click="goDetail(item)"
                    alt="加载错误"
                  />
                  <div class="item-body">
                    <div class="item-desc" @click="goDetail(item)">
                      {{ item.title }}
                    </div>
                    <div class="item-footer">
                      <div
                        class="avatar"
                        :style="{ backgroundImage: `url(${item.pic})` }"
                      ></div>
                      <div class="name">{{ item.name }}</div>
                      <div
                        @click="onhandleLike(item)"
                        class="like"
                        :class="item.liked ? 'active' : ''"
                      >
                        <i
                          class="icon-fabulous"
                          v-show="item.isZan === 1"
                          style="color: red"
                        ></i>
                        <i
                          class="icon-fabulous"
                          v-show="item.isZan === 0"
                          style="color: #333"
                        ></i>
                        <div class="like-total">{{ item.dz }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </waterfall>
          </div>
          <div class="container-water-fall" v-show="id == 1">
            <waterfall
              :col="col"
              :width="itemWidth"
              :gutterWidth="gutterWidth"
              :data="collectList"
              @loadmore="loadmore1"
            >
              <template>
                <div
                  class="cell-item"
                  v-for="item in collectList"
                  :key="item.id"
                >
                  <img
                    v-if="item.cover_one"
                    :src="item.cover_one"
                    @click="goDetail(item)"
                    alt="加载错误"
                  />
                  <div class="item-body">
                    <div class="item-desc" @click="goDetail(item)">
                      {{ item.title }}
                    </div>
                    <div class="item-footer">
                      <div
                        class="avatar"
                        :style="{ backgroundImage: `url(${item.pic})` }"
                      ></div>
                      <div class="name">{{ item.name }}</div>
                      <div
                        @click="onhandleLike(item)"
                        class="like"
                        :class="item.liked ? 'active' : ''"
                      >
                        <i
                          class="icon-fabulous"
                          v-show="item.isZan === 1"
                          style="color: red"
                        ></i>
                        <i
                          class="icon-fabulous"
                          v-show="item.isZan === 0"
                          style="color: #333"
                        ></i>
                        <div class="like-total">{{ item.dz }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </waterfall>
          </div>
          <div class="message" v-show="id == 2">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>我的消息</span>
              </div>
              <div v-for="item in msgList" :key="item.id" class="msgtext flex">
                <div class="msgleft flex">
                  <div>
                    <el-avatar :src="item.pic"></el-avatar>
                  </div>

                  <div class="msg">
                    <div class="msgname">
                      <div class="mname">{{ item.name }}</div>
                      <div class="msgtime">{{ item.create_time }}</div>
                    </div>
                    <div class="msgcontent">
                      {{ item.message }}
                    </div>
                  </div>
                </div>

                <div class="msgright" @click="delMsg(item)">删除</div>
              </div>
              <div class="pagination">
                <el-pagination
                  @current-change="currentPage"
                  background
                  layout="prev, pager, next"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-card>
          </div>
          <div class="edit" v-show="id == 3">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>编辑资料</span>
              </div>
              <div class="editinfo">
                <div class="toppic">
                  
                   <el-avatar :size="80" :src="circleUrl"></el-avatar>
                  <div>
                      <el-upload
                      action="#"
                      :on-preview="handlePreview"
                      :before-upload="handelBeforeUpload"
                      accept="image/*"
                      :http-request="uploadHttpRequest"
                      :on-change="onChange"
                      :show-file-list="false"
                    >
                   <el-button size="small" type="danger">更换头像</el-button>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                   
                  </div>
                  <div class="upload">
                  
                  </div>
                </div>
                <div class="editname flex">
                  <div class="elabel">昵称：</div>
                  <div class="lright">
                    <el-input
                      placeholder="请输入昵称"
                      v-model="name"
                      maxlength="12"
                      clearable
                      show-word-limit
                    >
                    </el-input>
                  </div>
                </div>
                <div class="editname flex">
                  <div class="elabel">性别：</div>
                  <div class="lright">
                    <el-radio-group v-model="sex">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div class="editname flex">
                  <div class="elabel">城市：</div>
                  <div class="lright flex">
                    <div class="pro">
                      <el-select
                        v-model="pid"
                        placeholder="请选择"
                        @change="selectPro"
                      >
                        <el-option
                          v-for="item in proList"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div class="editcity">
                      <el-select
                        v-model="cid"
                        placeholder="请选择"
                        @change="selectCity"
                      >
                        <el-option
                          v-for="item in cityList"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="editname flex">
                  <div class="elabel">简介：</div>
                  <div class="lright">
                    <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="请输入简介"
                      v-model="desc"
                      maxlength="100"
                      show-word-limit
                      clearable
                    >
                    </el-input>
                  </div>
                </div>
              </div>
              <div class="savebtn">
                <el-button type="success" round @click="upDateInfo"
                  >保存更改</el-button
                >
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div class="hcontent" v-if="uid">
        <div class="container-water-fall" v-show="id == 0">
          <waterfall
            :col="hcol"
            :width="itemWidth1"
            :gutterWidth="gutterWidth1"
            :data="newsList"
            @loadmore="loadmore2"
          >
            <template>
              <div class="cell-item" v-for="item in newsList" :key="item.id">
                <img
                  v-if="item.cover_one"
                  :src="item.cover_one"
                  @click="goDetail(item)"
                  alt="加载错误"
                />
                <div class="item-body">
                  <div class="item-desc" @click="goDetail(item)">
                    {{ item.title }}
                  </div>
                  <div class="item-footer">
                    <div
                      class="avatar"
                      :style="{ backgroundImage: `url(${item.pic})` }"
                    ></div>
                    <div class="name">{{ item.name }}</div>
                    <div
                      @click="onhandleLike(item)"
                      class="like"
                      :class="item.liked ? 'active' : ''"
                    >
                      <i
                        class="icon-fabulous"
                        v-show="item.isZan === 1"
                        style="color: red"
                      ></i>
                      <i
                        class="icon-fabulous"
                        v-show="item.isZan === 0"
                        style="color: #333"
                      ></i>
                      <div class="like-total">{{ item.dz }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </waterfall>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      tabPosition: "left",
      circleUrl: "",
      name: "",
      sex: "",
      city: "",
      desc: "",
      fans: "",
      follows: "",
      ds: "",
      col: 4,
      page: 1,
      type: 0,
      hcol: 5,
      newsList: [],
      current: 0,
      noteNum: "",
      navList: [
        {
          id: 1,
          name: "我的笔记",
        },
        {
          id: 2,
          name: "我的收藏",
        },
        {
          id: 3,
          name: "我的消息",
        },
        {
          id: 4,
          name: "编辑资料",
        },
     
        {
          id: 5,
          name: "退出登录",
        },
      ],
      token: "",
      id: 0,
      userinfo: "",
      collectList: [],
      msgList: [],
      total: 0,
      proList: [],
      cityList: [],
      pid: "",
      cid: "",
      uid: "",
      userType: 2,
      dialogImageUrl: "",
      dialogVisible:false
    };
  },
  computed: {
    /*
  注意:
  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
  2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
*/
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 450); // #rem布局 计算宽度
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
    itemWidth1() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 472); // #rem布局 计算宽度
    },
    gutterWidth1() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  mounted() {
    this.token = localStorage.getItem("token");
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    let uid = this.$route.query.uid;
    console.log("uid", uid);
    this.uid = uid;

    this.userinfo = userinfo;
    if (userinfo) {
      this.circleUrl = userinfo.avatarUrl;
      this.name = userinfo.name;
      this.sex = userinfo.sex;
      this.city = userinfo.city;
      this.desc = userinfo.desc;
      this.fans = userinfo.fans;
      this.follows = userinfo.follows;
      this.ds = userinfo.ds;
      this.getMyNewsList();
      this.getProvinces();
    } else if (uid) {
      this.type = 1;
      this.getUserinfo();
      this.getMyNewsList();
    } else {
      this.$confirm("您还未登录, 是否登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确定的操作(调用接口)
          this.$router.push({ name: "Login" });
        })
        .catch(() => {
          //几点取消的提示
        });

      return false;
    }
  },
  methods: {
    // 上传头像
    onChange(file, fileList) {
      console.log("fileList", fileList);
      this.fileList = fileList;
    },
    handelBeforeUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      let fileType = ".gif|.jpeg|.jpg|.png|.svg|";
      if (fileType.indexOf(fileName + "|") == "-1") {
        this.$message({
          type: "error",
          message: "不支持此格式文件上传",
        });
        return false;
      }
    },
    uploadHttpRequest(file) {
      var formFile = new FormData();
      formFile.append("img", file.file);
      this.$axios
        .post("upImage", formFile)
        .then((res) => {
          this.circleUrl = res.data;
          console.log('this.circleUrl',this.circleUrl);
          this.$message.success(res.msg);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    handlePreview() {
      this.dialogImageUrl = this.circleUrl;
      this.dialogVisible = true;
    },

    // 获取点赞
    getLike() {},
    loadmore() {
      if (this.userinfo) {
        this.page++;
        this.getMyNewsList();
      }
    },
    loadmore1() {
      if (this.userinfo) {
        this.page++;
        this.getCollectList();
      }
    },
    loadmore2() {
      if (this.userinfo) {
        this.page++;
        this.getMyNewsList();
      }
    },
    onhandleLike(item) {
      if (this.userinfo) {
        if (item.isZan === 0) {
          var isDo = 2;
        } else if (item.isZan === 1) {
          isDo = 1;
        }
        let params = {
          type: 1,
          doWhat: isDo,
          isNews: 1,
          nid: item.id,
        };
        this.$axios
          .post("newsDo", params)
          .then((res) => {
            console.log("this.$refs.waterfall", this.$refs.waterfall);
           if(item.isZan===0){
             item.isZan=1
             item.dz=item.dz+1
           }else{
             item.isZan=0
             item.dz=item.dz-1
           }
            
              console.log("item", item.isZan);
            // this.$set(this.newsList,item.isZan,item.isZan ? 0 : 1)
            this.$message.success(res.msg);
            this.getCollectList();
            this.getMyNewsList();
          })
          .catch((err) => {
            console.log("err", err);
          });
      } else {
        this.$confirm("您还未登录, 是否登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //点击确定的操作(调用接口)
            this.$router.push({ name: "Login" });
          })
          .catch(() => {
            //几点取消的提示
          });

        return false;
      }
    },
    // 获取笔记
    getMyNewsList() {
      let params = {
        token: this.token,
        uid: this.uid,
        type: this.type,
        page: this.page,
      };
      this.$axios
        .get("getMyNewsList", { params })
        .then((res) => {
          console.log("resm", res);
          this.noteNum = res.msg;
          if (this.page === 1) {
            this.newsList = [];
            setTimeout(() => {
              this.newsList = res.data;
            }, 500);
          } else {
            this.newsList = this.newsList.concat(res.data);
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    goDetail(item) {
      this.$router.push({
        name: "Detail",
        query: {
          id: item.id,
        },
      });
    },
    onTabClick(val) {
      this.page = 1;
      let id = val.index;
      this.id = id;
      console.log("val", val);

      if (this.userinfo) {
        if (id == 0) {
          this.getMyNewsList();
        }
        if (id == 1) {
          this.getCollectList();
        }
        if (id == 2) {
          this.getmessagelist();
        }
        if (id == 4) {
          this.$confirm("是否退出登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              //点击确定的操作(调用接口)
              this.upLogin();
            })
            .catch(() => {
              //几点取消的提示
            });

          return false;
        }
      } else {
        this.$confirm("您还未登录, 是否登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //点击确定的操作(调用接口)
            this.$router.push({ name: "Login" });
          })
          .catch(() => {
            //几点取消的提示
          });

        return false;
      }
    },
    upLogin() {
      localStorage.removeItem("SESSION");
      localStorage.removeItem("token");
      sessionStorage.removeItem("userinfo");
      this.$router.replace({ name: "Home" });
    },
    // 获取收藏
    getCollectList() {
      let params = {
        token: this.token,
        page: this.page,
      };
      this.$axios
        .get("getCollectList", { params })
        .then((res) => {
          if (this.page === 1) {
            this.collectList = [];
            setTimeout(() => {
              this.collectList = res.data;
            }, 500);
          } else {
            this.collectList = this.collectList.concat(res.data);
          }
          // console.log("res", res);
          // this.collectList=[]
          // this.collectList=res.data
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取消息
    getmessagelist() {
      let params = {
        token: this.token,
        page: this.page,
      };
      this.$axios
        .get("getmessagelist", { params })
        .then((res) => {
          console.log("res", res);
          this.msgList = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 删除消息
    delMsg(item) {
      let params = {
        token: this.token,
        mid: item.id,
      };
      this.$axios
        .post("delete_message", params)
        .then((res) => {
          this.$message.success(res.msg);
          this.getmessagelist();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    currentPage(e) {
      console.log("e", e);
      this.page = e;
      this.getmessagelist();
    },
    // 获取城市
    getProvinces() {
      this.$axios
        .get("getProvinces")
        .then((res) => {
          this.proList = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getCity() {
      let params = {
        pid: this.pid,
      };
      this.$axios
        .get("getProvinces", { params })
        .then((res) => {
          this.cityList = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    selectPro() {
      this.cid = "";
      this.getCity();
    },
    selectCity() {},
    upDateInfo() {
      let params = {
        name: this.name,
        sex: this.sex,
        cid: this.cid,
        desc: this.desc,
        pic: this.circleUrl,
      };
      this.$axios
        .post("pcupdateInfo", params)
        .then((res) => {
          this.$message.success(res.msg);
          this.userType = 1;
          this.getUserinfo();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getUserinfo() {
      let params = {
        token: this.token,
        type: this.userType,
        uid: this.uid,
      };
      this.$axios
        .get("getUserinfo", { params })
        .then((res) => {
          console.log("res", res);
          this.name = res.data.name;
          this.circleUrl = res.data.avatarUrl;
          this.sex = res.data.sex;
          this.city = res.data.city;
          this.desc = res.data.desc;
          this.fans = res.data.fans;
          this.follows = res.data.follows;
          this.ds = res.data.ds;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取他人笔记
  },
};
</script>
<style>
.wleft .el-tabs__nav {
  background: #fff;
  width: 180px;
}
.wleft .el-tabs__nav .el-tabs__item {
  text-align: center;
}
.wleft .el-tabs__nav .is-active {
  background: #f395a3ee;
  border-radius: 2px;
  color: #fff;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
}
.wleft .el-tabs__active-bar {
  background: #f395a3ee;
}
</style>
<style lang="less" scoped>
.content {
  width: 1200px;
  margin: 20px auto;
  .head {
    justify-content: space-between;
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    border-radius: 8px;
  }
  .left {
    width: 800px;
  }
  .right {
    font-size: 16px;
    color: #f54b64;
  }
  .rdesc {
    margin-left: 20px;

    .desc {
      font-size: 18px;
      margin-bottom: 40px;
      text-align: left;
      margin-top: 10px;
    }
    .notebox {
      margin-right: 20px;
      .note {
        font-size: 22px;
        color: #666666;
      }
      .notenum {
        font-size: 22px;
        color: #222222;
        margin-top: 5px;
      }
    }
  }
  .name {
    font-size: 26px;
    color: #222222;
    margin-right: 20px;
  }
  .city,
  .sex {
    background-image: linear-gradient(219deg, #f78361 3%, #f54b64 100%);
    border-radius: 20px;
    color: #fff;
    padding: 1px 15px;
    margin-right: 10px;
  }
  .wrap {
    margin-top: 20px;

    .wleft {
      width: 180px;
      margin-right: 20px;
      font-size: 16px;
      color: #666666;
      background: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      // padding-bottom: 400px;
      .item {
        font-size: 16px;
        color: #666666;

        height: 30px;
        line-height: 30px;
        margin-top: 20px;
      }
    }
    .container-water-fall {
      // padding: 0 28px;
      // width: 100vw;
      text-align: left;
      box-sizing: border-box;
      h4 {
        padding-top: 56px;
        padding-bottom: 28px;
        font-family: PingFangSC-Medium;
        font-size: 36px;
        color: #000000;
        letter-spacing: 1px;
        text-align: justify;
      }
      button {
        background-color: #ff0;
        color: #24292e;
        border: 1px solid rgba(27, 31, 35, 0.2);
        border-radius: 0.25em;
        width: 100px;
        line-height: 26px;
        font-size: 13px;
        margin: 4px 0;
        margin-right: 4px;
        cursor: pointer;
        outline: none;
        &.blue-light {
          background: #27fbc2;
        }
      }
      button:hover {
        background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
      }

      .cell-item {
        width: 100%;
        position: relative;
        margin-bottom: 10px;
        background: #ffffff;
        border: 2px solid #f0f0f0;
        border-radius: 12px 12px 12px 12px;
        overflow: hidden;
        box-sizing: border-box;
        img {
          // border-radius: 12px 12px 0 0;
          width: 100%;
          height: auto;
          display: block;
        }
        .name {
          width: 85px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .item-body {
          // border: 1px solid #F0F0F0;
          padding: 12px;
          .item-desc {
            font-size: 15px;
            color: #333333;
            line-height: 15px;
            font-weight: bold;
          }
          .item-footer {
            margin-top: 22px;
            position: relative;
            display: flex;
            align-items: center;
            .avatar {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              background-repeat: no-repeat;
              background-size: contain;
            }
            .name {
              max-width: 150px;
              margin-left: 10px;
              font-size: 14px;
              color: #999999;
            }
            .like {
              position: absolute;
              right: 0;
              display: flex;
              align-items: center;
              &.active {
                i {
                }
                .like-total {
                  color: #ff4479;
                }
              }
              i {
                width: 28px;
                display: block;
              }
              .like-total {
                margin-left: 10px;
                font-size: 12px;
                color: #999999;
              }
            }
          }
        }
      }
       .cell-item :hover:after {
    width: 100%;
    height: 100%;
    background-color: rgba(0,2,4,.2);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
    content: "";
    pointer-events: none;
}
    }
  }
  .bgColors {
    background: #f395a3ee;
    border-radius: 2px;
  }
  .box-card {
    width: 1000px;
    text-align: left;
  }
  .msgtext {
    justify-content: space-between;
    border-top: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
    .msg {
      margin-left: 20px;
    }
  }
  .box-card .el-card__body div:nth-child(1) {
    border: none;
  }
  .msgright {
    cursor: pointer;
    color: #f54b64;
    font-size: 18px;
  }
  .pagination {
    text-align: center;
  }
  .edit {
    .toppic {
      text-align: center;
    }
    .editinfo {
      width: 400px;
      margin: 0 auto;
      .editname {
        align-items: center;
        margin-top: 20px;
      }
      .lright {
        width: 350px;
      }
    }
    .savebtn {
      text-align: center;
      margin-top: 40px;
    }
  }
}
.hcontent {
  margin-top: 20px;
  .container-water-fall {
    // padding: 0 28px;
    // width: 100vw;
    text-align: left;
    box-sizing: border-box;
    h4 {
      padding-top: 56px;
      padding-bottom: 28px;
      font-family: PingFangSC-Medium;
      font-size: 36px;
      color: #000000;
      letter-spacing: 1px;
      text-align: justify;
    }
    button {
      background-color: #ff0;
      color: #24292e;
      border: 1px solid rgba(27, 31, 35, 0.2);
      border-radius: 0.25em;
      width: 100px;
      line-height: 26px;
      font-size: 13px;
      margin: 4px 0;
      margin-right: 4px;
      cursor: pointer;
      outline: none;
      &.blue-light {
        background: #27fbc2;
      }
    }
    button:hover {
      background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
    }

    .cell-item {
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      background: #ffffff;
      border: 2px solid #f0f0f0;
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;
      box-sizing: border-box;
      img {
        // border-radius: 12px 12px 0 0;
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
      }
      .name {
        width: 85px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .item-body {
        // border: 1px solid #F0F0F0;
        padding: 12px;
        .item-desc {
          font-size: 15px;
          color: #333333;
          line-height: 15px;
          font-weight: bold;
          cursor: pointer;
        }
        .item-footer {
          margin-top: 22px;
          position: relative;
          display: flex;
          align-items: center;
          .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
          }
          .name {
            max-width: 150px;
            margin-left: 10px;
            font-size: 14px;
            color: #999999;
          }
          .like {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            &.active {
              i {
              }
              .like-total {
                color: #ff4479;
              }
            }
            i {
              width: 28px;
              display: block;
            }
            .like-total {
              margin-left: 10px;
              font-size: 12px;
              color: #999999;
            }
          }
        }
      }
    }
     .cell-item :hover:after {
    width: 100%;
    height: 100%;
    background-color: rgba(0,2,4,.2);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
    content: "";
    pointer-events: none;
}
  }
}
</style>

